<template>
	<view class="address-container">
		<view class="address-box">
			<u-list>
				<u-list-item v-for="item in addressInfo" :key="item.id">
					<view class="address" @click=toUpdate(item)>
						{{item.position}} {{item.building}} {{item.floorPlate}}
					</view>
					<view class="info">
						<view class="name">
							{{item.name}}
						</view>
						<view class="phone">
							{{item.phone}}
						</view>
					</view>
					<uni-icons type="trash" size="30" color="red" class="trash" @click="deleteAddress(item)">
					</uni-icons>
				</u-list-item>
			</u-list>
		</view>
		<navigator url="/subpkg/addAddress/addAddress">
			<u-button type="primary" :plain="true" text="新增地址"></u-button>
		</navigator>
	</view>
</template>

<script>
	import {
		reqGetAddress,
		reqDeleteAddress,
		reqToUpdateAddress
	} from '@/common/api.js'
	import loginVue from '../login/login.vue'
	export default {
		data() {
			return {
				addressInfo: []
			}
		},
		methods: {
			// 获取地址信息
			async getAddress() {
				const res = await reqGetAddress()
				// console.log(res);
				this.addressInfo = res.data
			},

			// 跳转地址信息修改
			async toUpdate(address) {

				const res = await reqToUpdateAddress(address.id)
				if (res.code == 200) {
					uni.navigateTo({
						url: `/subpkg/addAddress/addAddress?address=${encodeURIComponent(JSON.stringify(res.data))}`,
					})

				}
			},

			// 删除地址信息
			async deleteAddress(item) {
				const res = await reqDeleteAddress(item.id)
				// console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: "删除成功",
						icon: 'success'
					})
					this.getAddress()
				} else {
					uni.showToast({
						title: "删除地址信息失败",
						icon: 'error'
					})
				}
			},


		},
		onLoad() {
			this.getAddress()
		},

		onBackPress(options) {
			// console.log(options);
			if (options.from === 'backbutton') {
				return false;
			}
			uni.switchTab({
				url:'subpkg/center/center'
			})
			return true;
		}

	}
</script>

<style lang="scss">
	.address-container {
		height: calc(100% - 100px);
		padding: 0 15px;
		// width: calc(100% - 30px);
	}

	.address-box {


		.u-list-item {
			margin: 15px 0;
			border-bottom: 2px solid #EBECED;
			height: 50px;
			line-height: 20px;
			position: relative;

			.address {
				font-size: 18px;

			}

			.info {
				display: flex;
				margin: 5px 0;
				color: #9098A0;

				.name {
					margin-right: 20px;
				}
			}

			.trash {
				position: absolute;
				right: 0;
				bottom: 10px;
			}
		}
	}

	.u-button {
		position: fixed;
		bottom: 20px;
		width: 90%;
	}
</style>
